<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易轮播图</title>
</head>
<body>
    <button id="btn">暂停播放</button>
    <div class="btn1">
        <img  id="img" src="img/g1.jpg" alt="">
    </div>
    <script>
        var index=0;
        var timer=setInterval(fun,500);
        // setInterval(函数名，时间)
        // 把定时器中的函数抽离出来
        function fun(){
            index++;
        if(index>5){
                index=1;
            }
        img.src='img/g'+index+'.jpg';
        }
        var flag=true;
        // 正在播放
        btn.onclick=function(){
            if(flag){
                clearInterval(timer);
                btn.innerHTML='继续播放';
                flag=false;
        // 暂停播放
            }else{
                timer=setInterval(fun,500);
                flag=true;
            }
        }
    </script>
    
</body>
</html>